import { useRef, useEffect } from "react";
// 组件
import Header from "components/Header";
import TopTitle from "components/TopTitle";
import Rank from "components/Rank";
import Pie from "components/Pie";
import Line from "components/Line";
import Sort from "components/Sort";
import Progress from "components/Progress";
import LineChange from "components/LineChange";
import Map from "components/Map";
import { getScale } from "utils/util";
import "./index.scss";
export default function App() {
  const dataScreenRef = useRef(null);

  useEffect(() => {
    if (dataScreenRef.current) {
      dataScreenRef.current.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
      dataScreenRef.current.style.width = `1920px`;
      dataScreenRef.current.style.height = `1080px`;
    }
  }, []);

  useEffect(() => {
    window.onresize = function () {
      if (dataScreenRef.current) {
        dataScreenRef.current.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
      }
    };
  }, []);

  return (
    <div className="container">
      <div className="dataScreen" ref={dataScreenRef}>
        {/* 顶部标题 */}
        <Header></Header>
        {/* 主要内容区 */}
        <div className="grail">
          {/* 左 */}
          <div className="grail_side">
            <Rank></Rank>
            <Pie></Pie>
            <Progress></Progress>
          </div>
          {/* 中 */}
          <div className="grail_middle">
            <div className="top">
              <TopTitle></TopTitle>
            </div>
            <div className="chart">
              <Map></Map>
              <div className="map1"></div>
              <div className="map2"></div>
              <div className="map3"></div>
            </div>
          </div>
          {/* 右 */}
          <div className="grail_side">
            <Line></Line>
            <Sort></Sort>
            <LineChange></LineChange>
          </div>
        </div>
      </div>
    </div>
  );
}
